<template>
  <div>
    <el-card style="max-width: 480px">
      <template #header>
        <p>我是头部</p>
      </template>
      <p>我是主体</p>
      <template #footer>
        <p>我是底部</p>
      </template>
    </el-card>
  </div>
  <el-table :data="tableData" stripe border>
    <el-table-column prop="id" label="Id" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="is" label="Is" />
  </el-table>
  <el-tree
   :data="treeData"
   :props="{ label: 'label', children: 'children' }"
  />

  <!-- 自定义节点内容 -->
  <el-tree
   :data="dataSource"
   :props="{ label: 'label', children: 'children' }"
  >
    <template #default="{ node, data }">
      <div class="custom-node-box">
        <span>{{ node.label }}</span>
      </div>
    </template>
  </el-tree>
</template>

<script setup>
  const dataSource = [
    {
      id: 1,
      label: 'Level one 1',
      children: [
        {
          id: 4,
          label: 'Level two 1-1',
          children: [
            {
              id: 9,
              label: 'Level three 1-1-1',
            },
            {
              id: 10,
              label: 'Level three 1-1-2',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: 'Level one 2',
      children: [
        {
          id: 5,
          label: 'Level two 2-1',
        },
        {
          id: 6,
          label: 'Level two 2-2',
        },
      ],
    },
    {
      id: 3,
      label: 'Level one 3',
      children: [
        {
          id: 7,
          label: 'Level two 3-1',
        },
        {
          id: 8,
          label: 'Level two 3-2',
        },
      ],
    },
  ]

  const tableData = [
    {
      id: 1,
      name: '张三',
      is: true
    },
    {
      id: 2,
      name: '李四',
      is: false
    },
    {
      id: 3,
      name: '王五',
      is: true
    },
    {
      id: 4,
      name: '赵六六',
      is: true
    }
  ] 
    const treeData = [
      {
        label: 'Title one',
        children: [
          {
            label: 'Title one 1.1',
            children: [
              {
                label: 'Title one 1.1.1',
                children: [

                ]
              }
            ]
          },
          {
            label: 'Title one 1.2',
            children: [

            ]
          }
        ]
      },
      {
        label: 'Title two',
        children: [

        ]
      },
      {
        label: 'Title three',
        children: [

        ]
      }      
    ]
</script>

<style scoped>

</style>